<!DOCTYPE html>

<html>

<head>
    <title></title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id="app-12">
        <app-layout>
            <h1 slot="header">这里可能是一个页面标题</h1>
            <p>主要内容的一个段落。</p>
            <p>另一个主要段落。</p>
            <p slot="footer">这里有一些联系信息</p>
        </app-layout>
    </div>
    <script>
        Vue.component('app-layout', {
            template: '\
            <div class="container">\
                <header>\
                  <slot name="header"></slot>\
                </header>\
                <main>\
                  <slot></slot>\
                </main>\
                <footer>\
                  <slot name="footer"></slot>\
                </footer>\
              </div>\
                    ',
        });
        // 创建根实例
        new Vue({
            el: '#app-12',
        })
    </script>
</body>


</html>